<template>
  <div>
    <el-table v-loading="data.isLoading" :data="data.allTableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="name" label="软件名称" />
      <el-table-column prop="techClass" label="技术分类" />
      <el-table-column prop="maintainUnit" label="所有权" />
      <el-table-column prop="copyOwner" label="著作权人" />
      <el-table-column prop="status" label="状态">
        <template #default="{row}">
          <span class="pending" v-if="row.status == 0">待确认</span>
          <span class="approved" v-if="row.status == 1">已确认</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useStore } from 'vuex'
import { getProjectSoftware } from '../../api/project'

export default defineComponent({
  props: {
    projectId: {
      type: String,
    },
  },
  setup(props) {
    const store = useStore()
    let data = reactive({
      params: {
        current: 1,
        size: 10,
        projectId: props.projectId,
      },
      total: 0,
      isLoading: false,
      allTableData: [],
    })
    const onSearch = async () => {
      data.isLoading = true
      getProjectSoftware(data.params).then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          data.allTableData = result.records.filter(item=>{
            return item.isContractSuccess == '是'
          })
          data.total = result.total
          data.isLoading = false
        }
      })
    }
    onSearch()
    return {
      store,
      data,
    }
  },
})
</script>

<style scoped>
.utils {
  margin: 10px 20px;
}
.demo-form-inline .el-form-item {
  width: 45%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 10px 20px;
}
</style>
